//列表某一项的组件
import React from 'react';
import './index.scss';

function TodoItem(props) {
  const {
    //data -> 当前遍历列表的item
    data,
    openCheckModal,
    openEditModal,
    completedItem,
    removeItem
  } = props;

  return (
    <li className='todo-item'>
      <div className="checkbox">
        <input
          type="checkbox"
          checked={data.completed}
          onChange={()=>completedItem(data.id)}
        />
      </div>
      <span
        className='content'
        style={{
          'textDecoration': data.completed
            ? 'line-through'
            : 'none'
        }}
      >{data.content}</span>
      <div className="btn-group">
        <div
          className="btn btn-primary"
          onClick={() => openCheckModal(data.id)}
        >查看</div>
        <div
          className="btn btn-warning"
          onClick={() => openEditModal(data.id)}
        >编辑</div>
        <div
          className="btn btn-danger"
          onClick={() => removeItem(data.id)}
        >删除</div>
      </div>
    </li>
  );
}

export default TodoItem;